<script setup lang="ts">
import { ref } from 'vue'
import CompanyList from './CompanyList.vue'
import ProjectList from './ProjectList.vue'
import CreateCompanyPanel from './CreateCompanyPanel.vue'
import CreateProjectPanel from './CreateProjectPanel.vue'
import ModifyProjectPanel from './ModifyProjectPanel.vue'
import ModifyCompanyPanel from './ModifyCompanyPanel.vue'
import { useDeleteCompany } from '../composables/useDeleteCompany'
import { useDeleteProject } from '../composables/useDeleteProject'
import { baseUrl } from '../config'

const showCreatePanel = ref(false)
const showCreateProjectPanel = ref(false)
const companyListKey = ref(0)
const projectListKey = ref(0)
const selectedCompany = ref<{ id: number; name: string } | null>(null)
const showModifyProjectPanel = ref(false)
const modifyProjectId = ref<number | null>(null)
const showModifyCompanyPanel = ref(false)
const modifyCompanyId = ref<number | null>(null)
const modifyCompanyName = ref('')
const modifyCompanyComment = ref('')

// 获取公司列表用于默认选中
const { deleteCompany, loading: companyDeleting, error: companyDeleteError } = useDeleteCompany(baseUrl)
const { deleteProject, loading: projectDeleting, error: projectDeleteError } = useDeleteProject(baseUrl)

function openCreatePanel() {
  showCreatePanel.value = true
}
function closeCreatePanel() {
  showCreatePanel.value = false
}
function handleCompanyCreated() {
  closeCreatePanel()
  companyListKey.value++
}
function handleCompanySelect(company: { id: number; name: string }) {
  selectedCompany.value = company
}
function openCreateProjectPanel() {
  showCreateProjectPanel.value = true
}
function closeCreateProjectPanel() {
  showCreateProjectPanel.value = false
}
function handleProjectCreated() {
  closeCreateProjectPanel()
  projectListKey.value++
}
function handleEditProject(projectId: number) {
  modifyProjectId.value = projectId
  showModifyProjectPanel.value = true
}
function closeModifyProjectPanel() {
  showModifyProjectPanel.value = false
  modifyProjectId.value = null
  projectListKey.value++
}
function handleEditCompany(company: { id: number; name: string; comment: string }) {
  modifyCompanyId.value = company.id
  modifyCompanyName.value = company.name
  modifyCompanyComment.value = company.comment
  showModifyCompanyPanel.value = true
}
function closeModifyCompanyPanel() {
  showModifyCompanyPanel.value = false
  modifyCompanyId.value = null
  companyListKey.value++
}

// 确认删除组织的 Id
const confirmDeleteCompanyId = ref<number | null>(null)
// 确认删除组织的名称
const confirmDeleteCompanyName = ref<string>('')

// 处理删除请求
function handleDeleteCompany(company: { id: number; name: string }) {
  confirmDeleteCompanyId.value = company.id
  confirmDeleteCompanyName.value = company.name
}

// 确认删除
async function confirmDeleteCompany() {
  if (confirmDeleteCompanyId.value == null) return
  await deleteCompany({ id: confirmDeleteCompanyId.value })
  cancelDeleteCompany()
  companyListKey.value++ // 刷新公司列表
}

// 取消删除
function cancelDeleteCompany() {
  confirmDeleteCompanyId.value = null
  confirmDeleteCompanyName.value = ''
}

// 确认删除项目的 Id
const confirmDeleteProjectId = ref<number | null>(null)
// 确认删除项目的名称
const confirmDeleteProjectName = ref<string>('')
// 处理删除请求（来自 ProjectList）
function handleDeleteProject(project: { id: number; name: string }) {
  confirmDeleteProjectId.value = project.id
  confirmDeleteProjectName.value = project.name
}
// 确认删除项目
async function confirmDeleteProject() {
  if (confirmDeleteProjectId.value == null) return
  await deleteProject({ id: confirmDeleteProjectId.value })
  cancelDeleteProject()
  projectListKey.value++ // 刷新项目列表
}
// 取消删除项目
function cancelDeleteProject() {
  confirmDeleteProjectId.value = null
  confirmDeleteProjectName.value = ''
}
</script>

<template>
  <div>
    <div class="company-float-window">
      <div class="company-layout">
        <CompanyList :key="companyListKey" @select="handleCompanySelect"
          @create="openCreatePanel" @edit="handleEditCompany" @delete="handleDeleteCompany" style="flex-shrink: 0;" />
        <div class="main-content">
          <div class="main-header">
            <button class="create-btn" @click="openCreateProjectPanel" :disabled="!selectedCompany">
              创建项目
            </button>
          </div>
          <div class="project-list-scroll">
            <ProjectList :key="projectListKey" :companyId="selectedCompany?.id ?? null" @edit="handleEditProject" @delete="handleDeleteProject"/>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showCreatePanel" class="modal-mask">
      <div class="modal-panel">
        <CreateCompanyPanel @created="handleCompanyCreated" />
        <button class="close-btn" @click="closeCreatePanel">关闭</button>
      </div>
    </div>
    <div v-if="showCreateProjectPanel" class="modal-mask">
      <div class="modal-panel">
        <CreateProjectPanel :companyId="selectedCompany?.id ?? null" @created="handleProjectCreated" />
        <button class="close-btn" @click="closeCreateProjectPanel">关闭</button>
      </div>
    </div>
    <div v-if="showModifyProjectPanel && modifyProjectId !== null" class="modal-mask">
      <div class="modal-panel">
        <ModifyProjectPanel :projectId="modifyProjectId" @close="closeModifyProjectPanel" />
        <button class="close-btn" @click="closeModifyProjectPanel">关闭</button>
      </div>
    </div>
    <div v-if="showModifyCompanyPanel && modifyCompanyId !== null" class="modal-mask">
      <div class="modal-panel">
        <ModifyCompanyPanel :companyId="modifyCompanyId" :name="modifyCompanyName" :comment="modifyCompanyComment"
          @close="closeModifyCompanyPanel" />
        <button class="close-btn" @click="closeModifyCompanyPanel">关闭</button>
      </div>
    </div>
    <div v-if="confirmDeleteCompanyId !== null" class="modal-mask" @click="cancelDeleteCompany">
      <div class="modal-panel">
        <div style="margin-bottom: 16px;">
          确认删除组织 <b>{{ confirmDeleteCompanyName }}</b> 吗？
        </div>
        <div v-if="companyDeleteError" class="error">{{ companyDeleteError }}</div>
        <button @click="confirmDeleteCompany" :disabled="companyDeleting" class="danger-btn">确认删除</button>
        <button @click="cancelDeleteCompany" class="close-btn" style="margin-left: 12px;">取消</button>
      </div>
    </div>
    <div v-if="confirmDeleteProjectId !== null" class="modal-mask" @click="cancelDeleteProject">
      <div class="modal-panel">
        <div style="margin-bottom: 16px;">
          确认删除项目 <b>{{ confirmDeleteProjectName }}</b> 吗？
        </div>
        <div v-if="projectDeleteError" class="error">{{ projectDeleteError }}</div>
        <button @click="confirmDeleteProject" :disabled="projectDeleting" class="danger-btn">确认删除</button>
        <button @click="cancelDeleteProject" class="close-btn" style="margin-left: 12px;">取消</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.company-float-window {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 50vw;
  height: 50vh;
  min-width: 600px;
  min-height: 400px;
  max-width: 900px;
  max-height: 700px;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: stretch;
  justify-content: center;
  z-index: 2000;
  overflow: hidden;
}

.company-layout {
  display: flex;
  width: 100%;
  height: 100%;
}

.main-content {
  flex: 1;
  padding: 32px;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main-header {
  flex-shrink: 0;
  margin-bottom: 24px;
}

.create-btn {
  padding: 10px 28px;
  background: #1890ff;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}

.create-btn:hover {
  background: #40a9ff;
}

.project-list-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.modal-mask {
  position: fixed;
  z-index: 3000;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-panel {
  background: #fff;
  border-radius: 10px;
  padding: 32px 24px 24px 24px;
  min-width: 340px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 4000;
}

.danger-btn {
  background: #ff4d4f;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 18px;
  cursor: pointer;
}

.close-btn {
  margin-top: 16px;
  padding: 6px 18px;
  background: #f5f5f5;
  border: none;
  border-radius: 4px;
  color: #333;
  cursor: pointer;
}

.close-btn:hover {
  background: #e6e6e6;
}
</style>